<template>
  <view class="cart-container">
    <PinCustomBar />
    <uni-notice-bar text="温馨提示：购物车支持扫码商品69码和防伪码直接加入购物车" style="marginBottom: 0" />
    <scroll-view class="cart-list" scroll-y v-if="cartData?.cartVoList.length">
      <view v-for="item in cartData?.cartVoList" :key="item.mainId" class="cart-list-item">
        <view class="main-name">
          <PinCheckBox isHalf />
          <text>{{ item.mainName }}</text>
        </view>
        <view v-for="ite in item.cartGoods" :key="ite.goodsList" class="goods-container">
          <view v-for="it in ite.goodsList " :key="it.goodId">
            <view class="goods-name">
              <PinCheckBox isHalf />
              <text>{{ it.goodsName }}</text>
            </view>
            <view v-for="i in it.productList" :key="i.productId" class="product-list">
              <PinCheckBox isHalf />
              <image class="product-image" :src="i.productImg" mode="scaleToFill" />
              <view class="product-list-info">
                <view>{{ i.productName }}</view>
                <view class="product-list-info-price-number">
                  <text class="product-list-info-price">￥{{ i.price.toFixed(2) }}</text>
                  <uni-number-box :value="i.qty" @change="e => change(e, i.cartId)" :min="0" :max="i.stock"
                    background="#f0ad4e" color="#fff" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <PinEmpty v-else text="购物车为空" imgUrl="http://cdn.uviewui.com/uview/empty/car.png" />

    <view class="cart-footer" v-if="cartData?.cartVoList.length">
      <view class="cart-check">
        <PinCheckBox isFull @onCheck="onCheckAll" />
        <text>全选</text>
      </view>
      <view class="cart-total-amount">
        合计:
        <text class="cart-check-amount">{{ cartData?.totalAmount.toFixed(2) }}</text>
        <view class="cart-submit">下单({{ cartData?.isChooseCount }})</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

import PinCheckBox from "./PinCheckBox.vue";

import Apis from "@/services/modules/cart"
import type { CartTypeData } from "@/types/cart";

import { _setStatusToData, filterData } from "./utils"

onShow(() => {
  getCartListData()
})

const cartData = ref<CartTypeData>()
const getCartListData = async () => {
  const { data } = await Apis.getCartListApi()
  cartData.value = data
}

const change = async (e: number, cartId: number) => {
  await Apis.updateCarApi({
    cartId: cartId,
    qty: e
  })
  getCartListData()
}

const onCheckAll = () => {

}

</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.cart-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .cart-list {
    flex: 1;

    .cart-list-item {
      background-color: #fff;
      margin-bottom: 16px;
      padding: 6px;

      .main-name {
        font-size: 16px;
        font-weight: 600;
        padding: 4px 0;
        color: #333333;
        display: flex;
        align-items: center;
      }

      .goods-container {
        padding-left: 12px;

        .goods-name {
          font-size: 14px;
          font-weight: 600;
          padding: 4px 0;
          color: #333333;
          display: flex;
          align-items: center;
        }

        .product-list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #f6f6f6;
          padding: 4px 6px;

          .product-image {
            width: 48px;
            height: 48px;
          }

          .product-list-info {
            flex: 1;
            margin-left: 6px;
            line-height: 32px;
            font-size: 12px;
            color: #333333;

            .product-list-info-price-number {
              display: flex;
              justify-content: space-between;

              .product-list-info-price {
                color: red;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }

  .cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    height: 52px;

    .cart-check {
      display: flex;
      align-items: center;
      padding-left: 18px;
    }

    .cart-check-amount {
      color: #f0ad4e;
    }

    .cart-total-amount {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .cart-submit {
        height: 52px;
        background-color: #f0ad4e;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        padding: 0 12px;
        margin-left: 12px;
      }
    }
  }
}
</style>
